<template>
  <div class="xtx-home-page">
    <!-- 广告&分类 -->
    <div class="xtx_entry">
      <div class="container">
        <!-- <home-category></home-category> -->
        <!-- <home-banner :offset="true"></home-banner> -->
        <home-banner></home-banner>
      </div>
    </div>
    <!-- 新鲜好物 -->
    <lazy-component style="height:521px" tagName="section">
      <home-new></home-new>
      <skeleton-small slot="skeleton"></skeleton-small>
    </lazy-component>
    <!-- 人气推荐 -->
    <lazy-component style="height:551px" tagName="section">
      <home-hot></home-hot>
      <skeleton-small slot="skeleton"></skeleton-small>
    </lazy-component>
    <!-- 热门品牌 -->
    <lazy-component style="height:452px" tagName="section">
      <home-brand></home-brand>
      <skeleton-small slot="skeleton" style="height:452px"></skeleton-small>
    </lazy-component>
    <!-- 分类商品 -->
    <lazy-component style="height:725px" tagName="section">
      <home-product :categoryId="0"></home-product>
      <skeleton-middle slot="skeleton" style="height:725px"></skeleton-middle>
    </lazy-component>
    <lazy-component style="height:725px" tagName="section">
      <home-product :categoryId="1"></home-product>
      <skeleton-middle slot="skeleton" style="height:725px"></skeleton-middle>
    </lazy-component>
    <lazy-component style="height:725px" tagName="section">
      <home-product :categoryId="2"></home-product>
      <skeleton-middle slot="skeleton" style="height:725px"></skeleton-middle>
    </lazy-component>
    <lazy-component style="height:725px" tagName="section">
      <home-product :categoryId="3"></home-product>
      <skeleton-middle slot="skeleton" style="height:725px"></skeleton-middle>
    </lazy-component>
    <!-- 最新专题 -->
    <lazy-component style="height:524px" tagName="section">
      <home-special></home-special>
      <skeleton-small slot="skeleton"></skeleton-small>
    </lazy-component>
  </div>
</template>

<script>
import HomeBanner from './components/home-banner.vue'
// import HomeCategory from './components/home-category.vue'
import HomeNew from './components/home-new.vue'
import HomeHot from './components/home-hot.vue'
import HomeBrand from './components/home-brand.vue'
import HomeProduct from './components/home-product.vue'
import HomeSpecial from './components/home-special.vue'
import SkeletonSmall from './skeleton/small.vue'
import SkeletonMiddle from './skeleton/middle.vue'
// 组件懒加载
import { component as LazyComponent } from '@xunlei/vue-lazy-component'
export default {
  name: 'xtx-home-page',
  components: {
    HomeBanner,
    // HomeCategory,
    HomeNew,
    HomeHot,
    HomeBrand,
    HomeProduct,
    HomeSpecial,
    LazyComponent,
    SkeletonSmall,
    SkeletonMiddle
  }
}
</script>

<style scoped lang='less'>
@import "./styles/home.less";
</style>
